<template>
  <div class="container">
    <!-- <h3>这里是一级路由组件——“数据大屏”</h3> -->
    <!-- 数据大屏模块的“内容展示区”↓ -->
    <div class="screen" ref="refForScreen">
      <div class="top">
        <!-- 顶部 -->
        <Top/>
      </div>
      <div class="bottom">
        <div class="left">
          <!-- 左侧 -->
           <Tourist class="tourist"/>
           <Sex class="sex"/>
           <Age class="age"/>
        </div>
        <div class="center">
          <!-- 中部 -->
          <Map class="map"/>
          <Line class="line"/>
        </div>
        <div class="right">
          <!-- 右侧 -->
          <Rank class="rank"/>
          <Year class="year"/>
          <Counter class="counter"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="Screen">
import { ref, onMounted } from 'vue'
// 导入展示顶部区域的子组件↓
import Top from '@/views/screen/components/top/index.vue'
// 导入底部区域中被用于显示游客数量、年龄分布和性别比例的图表的子组件↓
import Tourist from '@/views/screen/components/tourist/index.vue'
import Age from '@/views/screen/components/age/index.vue'
import Sex from '@/views/screen/components/sex/index.vue'
// 导入中间区域中被用于显示地图和折线图的组件↓
import Map from '@/views/screen/components/map/index.vue'
import Line from '@/views/screen/components/line/index.vue'
// 导入右侧区域中被用于显示排行榜、年度游客数据量对比和预约渠道数据统计的组件↓
import Rank from '@/views/screen/components/rank/index.vue'
import Year from '@/views/screen/components/year/index.vue'
import Counter from '@/views/screen/components/counter/index.vue'
let refForScreen = ref() // 定义一个响应式引用，用来存储上面定义的“数据大屏模块的内容展示区”的所在DOM元素
onMounted(() => {
  // 把元素的左上角从屏幕的中心点移动到左上角（即其原来的所在位置）↓
  refForScreen.value.style.transform = `scale(${aFunctionUsedToCalculateTheScalingRatio()}) translate(-50%, -50%)`
})
// 计算缩放的比例↓
function aFunctionUsedToCalculateTheScalingRatio(width = 1920, height = 1080) {
  const TheWidthAfterScaleing = window.innerWidth / width; // 缩放后的宽度
  const TheHeightAfterScaleing = window.innerHeight / height; // 缩放后的高度
  if (TheWidthAfterScaleing < TheHeightAfterScaleing) {
    return TheWidthAfterScaleing; // 返回缩放比例
  } else {
    return TheHeightAfterScaleing;
  }
}
// 监听浏览器视口宽高的变化（注：方法“window.onresize”会在窗口大小发生变化时触发）↓
window.onresize = function () {
  console.log('窗口大小发生了变化')
  refForScreen.value.style.transform = `scale(${aFunctionUsedToCalculateTheScalingRatio()}) translate(-50%, -50%)`
}
</script>
<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  background: url(./images/bg.png) no-repeat;
  background-size: cover;
  .screen {
    width: 1920px;
    height: 1080px;
    // background-color: red;
    position: fixed;
    left: 50%;
    top: 50%;
    /* 使用上面的↑三个属性来把元素的左上角的位置调整到设备屏幕的中心点 */
    /* 把缩放时的基点（即参考点）从元素的几何中心调整到元素的左上角↓ */
    transform-origin: left top;
    .top{
      width: 100%;
      height: 40px;
      // background-color: cyan;
    }
    .bottom{
      display: flex;
      // 注：在CSS中，flex属性是flex-grow、flex-shrink和flex-basis的简写形式，常用于flex布局中，定义子元素如何分配父容器中的可用空间。
      // 注：这里的flex属性实际上是flex-grow的简写形式（因为flex-shrink和flex-basis未明确指定，所以它们采用默认值）。flex-grow属性定义了子元素在父容器中剩余空间的分配比例
      .left{
        flex: 1;
        // background: red;
        height: 1040px;
        display: flex;
        // 注：flex-direction属性用于指定子元素在主轴上的排列方向，默认值是row（即水平方向）。当设置为column时，则表示垂直方向↓
        flex-direction: column;
        .tourist{
          flex: 1.2;
          // background: blue;
        }
        .age{
          flex: 1;
          // background: yellow;
        }
        .sex{
          flex: 1;
          //  background: pink;
        }
      }
      .right{
        flex: 1;
        // background: red;
        margin-left: 40px;
        display: flex;
        flex-direction: column; // 注：此处设置为“在垂直方向上浮动”
        .rank{
          flex:1.5;
          // background: green;
        }
        .year{
          flex:1;
          // background: red;          
        }
        .counter{
          flex:1;
          // background: purple;
        }
      }
      .center{
        flex: 1.5;
        display: flex;
        flex-direction: column; // 注：此处设置为“在垂直方向上浮动”
        .map{
          flex: 4;
          // background: red;
        }
        .line{
          flex: 1;
          // background: orange;
        }
      }
    }
  }
}
</style>